<template>
  <a-drawer title="查看菜单和操作权限" :width="1100" :bodyStyle="{ padding: 0 }" :visible="visible" @close="() => (visible = false)">
    <a-table v-if="dataSource.length > 0" rowKey="id" size="middle" :loading="loading" :columns="columns" :dataSource="treeData" :pagination="false" :indent-size="8" default-expand-all-rows>
      <template slot="auths" slot-scope="auths">
        <template v-if="Array.isArray(auths) && auths.length > 0">
          <a-tag v-for="item in auths" :key="item.id" color="blue">{{item.name}}</a-tag>
        </template>
      </template>
    </a-table>
    <a-empty v-else />
  </a-drawer>
</template>
<script>
import { listToTree } from '@/utils/common'
import { GetMenuAndMenuAuth } from '@/api/manage/menu'
import { Empty, Tag } from 'ant-design-vue'
export default {
  name: 'SjhtMenuTree', //查看菜单和操作权限
  components: {
    [Empty.name]: Empty,
    [Tag.name]: Tag
  },
  data() {
    return {
      visible: false, //是否显示
      loading: false, //是否加载
      dataSource: [],
      columns: [
        { title: '菜单名称', width: 200, dataIndex: 'title' },
        { title: '操作权限', dataIndex: 'auths', scopedSlots: { customRender: 'auths' } }
      ]
    }
  },
  methods: {
    show() {
      this.visible = true
      if (this.loading) return
      this.loading = true
      GetMenuAndMenuAuth()
        .then(res => {
          this.dataSource = res
        })
        .catch(err => {
          this.dataSource = []
          this.$message.error(err)
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  computed: {
    treeData: function () {
      return listToTree(this.dataSource)
    }
  }
}
</script>